<!DOCTYPE html>
<html lang="zh-CN" style="font-size: 253.733px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,,minimum-scale=1,maximum-scale=1">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta content="telephone=no" name="format-detection">
    <title>详情页</title>
    <link rel="stylesheet" type="text/css" href="__TMPL__Public/assets/css/common.css">
    <link rel="stylesheet" type="text/css" href="__TMPL__Public/assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="__TMPL__Public/assets/css/swiper-3.3.1.min.css">
    <link rel="stylesheet" type="text/css" href="__TMPL__Public/assets/css/detail1.css">
    <script src="__TMPL__Public/assets/js/jquery-v1.10.2.min.js"></script>
    <script type="text/javascript" src="__TMPL__Public/assets/js/common.js"></script>
    <script type="text/javascript" src="__TMPL__Public/assets/js/swiper.min.js"></script>
    <script src="__TMPL__Public/assets/layer/layer.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //选择尺码
            $(".detail-size").on("click",".size-list li", function(){
                $(this).closest(".detail-size").find(".size-list li").removeClass('on');
		        $(".detail-price").html("￥"+$(this).attr("data-price"));
                $(this).addClass('on');
		        //库存销售显示剩余库存量
		        var type="sale_type2";
		        if(type=="sale_type2"){
			        var count=$(this).attr("data-count");
			        count=Number(count);
			        $(".pay_btn_cls").show();
			        $(".detail-block").css("background","#fff");
			        if(!isNaN(count) && count > 0){
				        $(".store_count_cls").html("库存："+count);
			        }else if(count < 1){
				        $(".store_count_cls").html("无货");
				        //隐藏购物按钮
				        $(".pay_btn_cls").hide();
				        $(".detail-block").css("background","gray");
			        }else{
				        $(".store_count_cls").html("");
			        }
		        }
            });
            $(".add-to-cart").click(function(){
                add_cart();
            });
            $(".buy-now").click(function(){
                add_cart('buy-now');
            });
            $('.header .menu').click(function(){window.history.back();})
        });
        function myalert(con){
            layer.alert(con,{title:false,closeBtn: 0,btn:false,time:1500});
        }
        function myalert1(con){
            layer.alert(con,{title:false,closeBtn: 0,btn:false,time:1500,end:function(){
                location.reload();
            }});
        }
        function add_cart(isbuy){
            var size=$(".size-list li.on");
            var size_html=size.html();
            if(size_html==null){
                myalert("请选择尺寸");
                return;
            }
            var spec_key = size.attr("data-key");
            var spec_name = size.attr("data-name");
            count = size.attr("data-count");
            var goods_num=$("#goods_num_id").text();
            if(goods_num == null||goods_num == 0){
                myalert("请选择数量");
                return;
            }
            if(goods_num > count){
                myalert("库存不足");
                return;
            }
            var goods_id = $("#goods_id").val();
            var data={shop_id:goods_id,spec_key:spec_key,spec_name:spec_name,shop_num:goods_num};
            $.post("{:U('shop/cart')}",data,function(data){
                if(data.status==1){
                    myalert1('购物车添加成功');
                }else{
                    myalert(data.msg);
                }
            },"json");
        }
    </script>
</head>
<body>
    <div class="header">
        <div class="menu">
            <span class="back-menu"></span>返回
        </div>
        详情页
        <a href="{:U('shop/cart')}" class="right-cart">
            <span>
                <if condition="$cart_num eq ''">
                    <em class="car-num"  style="display: none;"></em>
                <else/>
                    <em class="car-num">{$cart_num}</em>
                </if>
            </span>
        </a>
    </div>
    <div class="content">
        <!-- 轮播图 -->
	    <div id="banner" class="swiper-container swiper-container-horizontal">
            <div id="piclist" class="swiper-wrapper" style="transform: translate3d(-5709px, 0px, 0px); transition-duration: 0ms;">
                <foreach name="shop.imgs" item="v">
                    <div class="swiper-slide" data-swiper-slide-index="0" style="width: 1903px;">
                        <a href="javascript:;"><img src="__UPLOAD__{$v}"></a>
                    </div>
                </foreach>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!-- 轮播图 -->
	    <input type="hidden" id="goods_id" value="{$shop.id}">
        <div class="detail-tit">
           <h2>{$shop.shop_title}</h2>
           <div class="detail-price">￥{$shop.shop_price}</div>
            <!--<div class="icon-like">
                <div class="icon-like-wrap on">
                    <span><i></i></span>
                    <p>已收藏</p>
                </div>
            </div>-->
        </div>
        <div class="size-color detail-block">
            <div class="detail-size">
                <h3 style="display:inline-block">可选尺寸</h3>
                <ul class="clearfix size-list">
                    <foreach name="shop.shop_size" item="v">
                        <li data-price="{$v.price}" data-key="{$v.size_id}" data-name="尺寸:{$v.size_name}" data-unit="{$shop.shop_pany}" data-count="{$v.kc}">{$v.size_name}</li>
                    </foreach>
                </ul>
            </div>
            <div class="detail-color">
		    <!-- 库存：10 -->
               <span class="store_count_cls"></span>
            </div>
        </div>
        <div class="detail-block clearfix pay_btn_cls">
            <div class="detail-num fl">
                <h3>选择数量</h3>
                <div class="select-num num_001">
                    <span class="deduct-num">-</span>
                    <em id="goods_num_id">1</em>
                    <span class="plus-num">+</span>
                </div>
            </div>
            <button class="detail-btn add-to-cart">加入购物车</button>
        </div>
        <div class="detail-info">
		<h2>商品参数</h2>
		<ul style="margin:5px;">
          	<li>
                <span class="span_010">面料</span>
                <span class="span_011">{$shop.shop_fabric}</span>
            </li>
        </ul>
	</div>
	<div class="detail-info">
        <h2>商品详情</h2>
		{$shop.shop_content}
    </div>
    </div>
    <!-- content end -->
 <script>
        $('.plus-num').on('click',  function(){
	    var num=$("#goods_num_id").html();
           if(num<1){
		        $("#goods_num_id").html(1);
            }else{
		        $("#goods_num_id").html(++num);
            }
        });
        $('.deduct-num').on('click',  function(){
	        var num=$("#goods_num_id").html();
            if(num<2){
		        $("#goods_num_id").html(1);
            }else{
		        $("#goods_num_id").html(--num);
            }
        });
        var swiper = new Swiper('.swiper-container', {
            // 轮播图的方向，也可以是vertical方向
            direction:'horizontal',
            //播放速度
            loop: true,
            // 自动播放时间
            autoplay:2000,
            // 播放的速度
            speed:2000,
            autoplayDisableOnInteraction : false,
            pagination: '.swiper-pagination',
            paginationClickable: true
        });
    </script>
    <style>
        .online-service{
            width: 1.4rem;
            height: 1.4rem;
            background: #fff;
            position: fixed;
            right: .2rem;
            bottom: 2rem;
            background: url("__TMPL__Public/assets/img/service.png") center center no-repeat;
            background-size: cover;
        }
        .online-service a{
            display: inline-block;
            width: 100%;
            height: 100%;
        }
    </style>
    <div class="online-service"> <a href="http://kefu.easemob.com/webim/im.html?tenantId=27419"></a></div>
    <!-- 底部导航 -->
    <tc_include file="Public:footer"/>
    <script type="text/javascript" src="__TMPL__Public/assets/js/stats" charset="UTF-8"></script>
</body>
</html>